<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

    <title>Materialize - Documentation</title>

    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">

    <!-- Android 5 Chrome Color -->
    <meta name="theme-color" content="#EE6E73">

    <link href="../../../bin/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
  <!--  <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />-->
  <!--  <link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>-->
    <link href="../../../css/prism.css" rel="stylesheet" />
  </head>

  <body>


    <!-- Regular Modal -->
    <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Regular Modals</a>

    <!-- Modal Structure -->
    <div id="modal1" class="modal">
      <div class="modal-content">
        <h4>Modal Header</h4>
        <!-- Modal Trigger to open second modal -->
        <a class="waves-effect waves-light btn modal-trigger" href="#modal2">Modal</a>
      </div>
      <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
      </div>
    </div>
    <!-- Modal Structure -->
    <div id="modal2" class="modal">
      <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
      </div>
      <div class="modal-footer">
        <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
      </div>
    </div>


    <!-- Fixed Footer Modal -->
      <a class="modal-trigger waves-effect waves-light btn" href="#modal3">Fixed Footer Modals</a>

      <!-- Modal Structure -->
      <div id="modal3" class="modal modal-fixed-footer">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <!-- Modal Trigger for nested modal -->
            <a class="modal-trigger waves-effect waves-light btn" href="#modal4">Modal</a>
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
      </div>
      <!-- Modal Structure -->
      <div id="modal4" class="modal modal-fixed-footer">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
      </div>


      <!-- Bottom Sheet Modals -->
      <!-- Modal Trigger -->
      <a class="waves-effect waves-light btn modal-trigger" href="#modal5">Bottom Sheet Modals</a>

      <!-- Modal Structure -->
      <div id="modal5" class="modal bottom-sheet">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <!-- Nested Modal Trigger -->
          <a class="waves-effect waves-light btn modal-trigger" href="#modal6">Modal</a>
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
      </div>
      <!-- Modal Structure -->
      <div id="modal6" class="modal bottom-sheet">
        <div class="modal-content">
          <h4>Modal Header</h4>
          <p>A bunch of text</p>
        </div>
        <div class="modal-footer">
          <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a>
        </div>
      </div>



  <!--  Scripts-->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="../../../bin/materialize.js"></script>
  <!--     <script src="js/velocity.min.js"></script>-->
  <!--  <script src="js/leanModal.js"></script>-->

    <script>
     $(document).ready(function(){
      $('.modal').modal();
    });
    </script>

  </body>
</html>
